<template>
  <div class="app-container">
    <el-table
      :data="departmentList"
      style="width: 100%;"
      border
      highlight-current-row
      @row-click="clickRow"
    >
      <el-table-column
        align="center"
        label="ID"
        width="50"
      >
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="门店名称"
      >
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <!-- <el-table-column
        align="center"
        label="提成比例"
        width="220"
      >
        <template slot-scope="scope">
          {{ scope.row.commission }}
        </template>
      </el-table-column> -->
    </el-table>
    <div style="text-align:right;">
      <el-button
        type="danger"
        @click="handleCancel"
      >取消</el-button>
      <el-button
        type="primary"
        @click="handleConfirm"
      >确定</el-button>
    </div>
  </div>
</template>

<script>
import { getDepartment, getPrescriptionInfoById } from '@/api/department'
import { timestampToTimeDay, timestampToTime } from '@/utils/time'

const defaultDepartment = {
  name: '',
  id: ''
}
export default {
  props: {
    type: {
      type: String,
      default() {
        return ''
      }
    },
    payment: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      department: Object.assign({}, defaultDepartment),
      departmentList: [],
      dialogVisible: false,
      dialogType: 'new',
      search: ''
    }
  },
  created() {
    this.getAdminBase()
  },
  methods: {
    async getAdminBase() {
      const { data } = await getDepartment()
      // for (const i in data.list) {
      // }
      this.departmentList = data
    },
    handleSizeChange(page) {
      this.pageSize = page
      this.getPrescription({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    handleCurrentChange(page) {
      this.pageNum = page
      this.getPrescription({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    clickRow(row) {
      this.selectPrescription = row
    },
    async handleConfirm() {
      if (!this.selectPrescription.id) {
        this.$message({
          message: '选择一个部门'
        })
        return
      } else {
        console.log(this.selectPrescription)
        this.$emit('confirm', this.selectPrescription)
      }
    },
    handleCancel() {
      this.$emit('cancel', this.selectPrescription)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
.el-table__body tr.current-row > td {
  background-color: rgb(64, 158, 255) !important;
  color: #fff;
}
</style>
